<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		textarea{ width:1000px;height:200px; }
		.edit{ width:1000px;height:200px;border:1px solid #000; }
	</style>
</head>
<body>
	<div id="app">
			
		<textarea v-model="val"></textarea>
		<!-- <div class="edit" contenteditable v-html="val"></div> -->
		<div>
			<button @click="compile()"  v-on:keyup.enter="compile">编译</button>
		</div>
	</div>
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
	<script src="./lib/Vue.js"></script>
	<script type="text/javascript" src="Lexer.js"></script>
	<!-- <script type="text/javascript" src="src(3)/src/CompilerParserNew.js"></script> -->
	<script type="text/javascript" src="CompilerParser.js"></script>
	<script type="text/javascript">
		
		var app = new Vue({
			el: '#app',
			data: {
				val:'',
			},
			watch: {
				'val': {
					handler(value) {
						this.compile();
					},
					deep: true
				},
			},
			mounted(){

			},
			methods: {
				//监听词法解析器
				notifyTokenCreation(token,elementNode,begin,end){
					// if(this.keyWords[token.getLiteral()]!==undefined){
				},
				getContent(){
					return this.divInstance.innerText;
				},
				changeNode(n){
					var f=n.childNodes;
					for(var c in f){
						this.changeNode(f[c]);
					}
					if(n.data){
						this.lastBegin=0;
						n.keyWordCount=0;
						var lexer=new Lexr(n.data);
						lexer.setLexingOberver(this.n);
						lexer.lexing();
					}
				},
				notifyTokenCreation(token,elementNode,begin,end){
					if(this.keyWords[token.getLiteral()] !==undefined){
						var e={};
						e.node=elementNode;
						e.begin=begin;
						e.end=end;
						e.token=token;
						elementNode.keyWordCount++;
						this.keyWordElementArray.push(e);
					}
				},
				hightLightKeyWord(token,elementNode,begin,end){
					var strBefore=elementNode.data.substr(this.lastBegin,begin-this.lastBegin);
					strBefore=this.changeSpaceToNBSP(strBefore);
					var textNode=document.createTextNode(strBefore);
					var parentNode=elementNode.parentNode;
					parentNode.insertBefor(textNode,elementNode);
					var span=document.createElement('span');
					span.style.color='green';
					span.classList.add(this.keyWordClass);
					span.appendChild(document.createTextNode(token.getLiteral()));
					parentNode.insertBefore(span,elementNode);
					this.lastBegin=end-1;
					elementNode.keyWordCount--;
					// console.log(this.divInstance.innerHTML);
				},
				changeSpaceToNBSP(str){
					var s="";
					for(var i=0;i<str.length;i++){
						if(str[i]===' '){
							s+='\u00a0';
						}else{
							s+=str[i];
						}
					}
				},
				compile(){
					// console.log('compile');
					var lexer=new Lexer(this.val);
					// var lexer=new Lexer('let x=y+5;u=3;');
					// lexer.lexing();
					/*console.log(lexer);
					console.log(lexer.getKeyWords());*/

					var parser=new CompilerParser(lexer);
					parser.parseProgram()
				}

			}
		});

	</script>
</body>
</html>